<template>
  <view class="anniversariesList flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack :title="title" is-fixed background="#FFFFFF"
                    @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="anniversariesList_content">
      <view class="hW_25"></view>
      <header-navigation-bar :headerList="headerList" :headerIndex="headerIndex" @selectIndex="selectHeaderIndex"
                             class="mt_25"></header-navigation-bar>
      <birthday-content ref="birthday" v-if="headerIndex == 0" :bottomFlag="bottomFlag" :userInfo="userInfo"
                        :options="options"
                        :birthdayList="timeList.birthdayList" @change="setBirth"></birthday-content>
      <anniversary-content ref="setAnniversary" v-if="headerIndex == 1" :bottomFlag="bottomFlag" :options="options"
                           :anniversaryList="timeList.anniversaryList" @change="setAnniversary"></anniversary-content>
      <!--      <solar-term-festival v-if="headerIndex == 2"-->
      <!--                           :solarTermFestivalList="timeList.solarTermFestivalList"></solar-term-festival>-->
      <your-horoscope-today v-if="headerIndex == 2"
                            :yourHoroscopeToday="timeList.yourHoroscopeToday"></your-horoscope-today>
    </view>
  </view>
</template>

<script>
  import HeaderNavigationBar from '@/pages/genealogy/components/headerNavigationBar.vue';
  import BirthdayContent from '@/pages/genealogy/components/birthdayContent.vue';
  import sheep from '@/sheep';
  import YourHoroscopeToday from '@/pages/genealogy/components/yourHoroscopeToday.vue';
  import AnniversaryContent from '@/pages/genealogy/components/anniversaryContent.vue';

  export default {
    components: {
      AnniversaryContent,
      YourHoroscopeToday,
      BirthdayContent,
      HeaderNavigationBar,
    },
    data() {
      return {
        // 头部高度
        headerHeight: 0,
        headerList: [
          {
            title: '生日',
          },
          {
            title: '纪念日',
          },
          // {
          //   title: '节日节气'
          // },
          {
            title: '今日运势',
          },
        ],
        // 选中的头部tarbar
        headerIndex: 0,
        // 浮窗按钮的配置
        bottomFlag: false,
        systemInfo: {},
        // 时间列表
        timeList: {
          birthdayList: {},
          anniversaryList: {},
          solarTermFestivalList: {},
          yourHoroscopeToday: {},
        },
        userInfo: {},
      };
    },
    computed: {
      title() {
        return this.headerIndex == 0 ? '生日纪念日' : this.headerIndex == 1 ? '生日纪念日' : '今日运势';
      },
    },
    props: {
      options: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    mounted() {
      if (!!this.options.family_id) {
        this.headerList = [
          {
            title: '生日',
          },
          {
            title: '纪念日',
          },
        ];
      } else {
        this.headerList = [
          {
            title: '生日',
          },
          {
            title: '纪念日',
          },
          {
            title: '今日运势',
          },
        ];
      }
      uni.$on('getBottomButton', () => {
        this.getBottomButton();
      });
      this.getYourHoroscopeToday();
      this.$nextTick(() => {
        this.systemInfo = uni.getSystemInfoSync();
        // this.getBottomButton();
        this.headerIndex = Number(!!this.options.index ? this.options.index : 0);
        this.$forceUpdate();
      });
    },
    methods: {
      // 获取用户详情以及生日
      async getUserInfo() {
        if (this.options.is_flag == 2) {
          const { data } = await sheep.$api.user.userAllmemory({ type: 1 });
          this.userInfo = data.user;
          this.timeList.birthdayList.month = [];
          this.timeList.birthdayList.after_month = [...data.familyMemory, ...data.genealogyMemory];
          return;
        }
        if (this.options.is_flag == 3) {
          const { data } = await sheep.$api.genealogy.getGenealogyBirthdayList({
            page: 0,
            pagesize: 0,
            total: 0,
            genealogy_id: this.options.family_id,
          });
          this.timeList.birthdayList.month = data.month;
          this.timeList.birthdayList.after_month = data.after_month;
          // console.log('index', this.options.index);
        } else {
          const { data } = await sheep.$api.family.getFamilyBirthday({
            family_id: this.options.family_id,
            type: 1,
            page: 0,
          });
          this.userInfo = data.user;
          this.timeList.birthdayList.month = data.list30;
          this.timeList.birthdayList.after_month = data.list30More;

        }
      },
      // 获取用户纪念日
      async getAnniversaryList() {
        if (this.options.is_flag == 2) {
          const { data } = await sheep.$api.user.userAllmemory({ type: 2 });
          this.userInfo = data.user;
          this.timeList.anniversaryList = [...data.familyMemory, ...data.genealogyMemory];
          return;
        }
        if (this.options.is_flag == 3) {
          const { data } = await sheep.$api.genealogy.getGenealogyBirthdayListBy1({
            genealogy_id: this.options.family_id,
            total: 0,
            page: 0,
            pagesize: 0,
          });
          this.timeList.anniversaryList = [...data.month, ...data.after_month];
        } else {
          const { data } = await sheep.$api.family.getFamilyBirthday({
            family_id: this.options.family_id,
            type: 2,
            page: 0,
          });
          this.timeList.anniversaryList = [...data.list30, ...data.list30More];
        }

      },
      getBottomButton() {
        const query = uni.createSelectorQuery().in(this);
        query.select('.anniversariesList_content').boundingClientRect(data => {
          const rpx = this.systemInfo.windowWidth / 750;
          this.bottomFlag = (this.headerHeight + data.top + data.height) > this.systemInfo.windowHeight - (200 * rpx);
          this.$forceUpdate();
        }).exec();
      },
      getPageHeight(number) {
        this.headerHeight = number;
      },
      selectHeaderIndex(index) {
        this.headerIndex = index;
        switch (index) {
          case 0:
            this.getUserInfo();
            return;
          case 1:
            this.getAnniversaryList();
            return;
          case 2:
            this.getYourHoroscopeToday();
            return;
        }
      },
      setBirth(index) {
        if (index == 0) {
          this.getBirthdayList();
        } else if (index == 2) {
          getFriendBirthday().then(res => {
            this.timeList.birthdayList = res.data;
            this.getBottomButton();
          });
        } else {
          this.timeList.anniversaryList = [];
        }
      },
      // 获取生日列表
      getBirthdayList() {
        getJournal({
          type: 1,
          family_id: this.family_id,
        }).then(res => {
          this.timeList.birthdayList = res.data.res;
        });
      },
      // 获取今日运势
      async getYourHoroscopeToday() {
        let { data } = await sheep.$api.family.getFortuneInfo();
        console.log(data);
        this.timeList.yourHoroscopeToday = data;
      },
      // 获取成员信息
      async getMemberInfo(member_id) {
        let { data } = await getMemberUserInfo({ member_id: member_id ? member_id : this.$store.state.shiqinStore.member_id });
        this.$nextTick(() => {
          this.userInfo = data;
          this.$forceUpdate();
        });
        await this.getYourHoroscopeToday();
      },
    },
  };
</script>

<style lang="scss">
  .anniversariesList {
    /* #ifdef H5 */
    margin: auto;
    /* #endif */
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .anniversariesList_headerTitle {
      position: absolute;
      bottom: -26rpx;
      left: 50%;
      transform: translateX(-50%);

      .anniversariesList_headerTitle_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #A0A0A0;
      }
    }

    .anniversariesList_content {
      width: 702rpx;
    }
  }
</style>
